<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item style="background-color: transparent;font-weight:bold;" index="0">
                <router-link to="/"><img style="width: 90px" src="http://qsrr7y19m.hn-bkt.clouddn.com/05.png"></router-link>
              </el-menu-item>
            <el-menu-item style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none; font-size: 40px">
              在线课程论坛系统后台
            </el-menu-item>
            <div v-if="loginuser==true">
              <el-menu-item index="6" style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;color: red" @click="tuichu">退出</el-button>
              </el-menu-item>
              <el-menu-item class="user-name"  style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold; color:black;background-color: Transparent; border-style :none;" type="text" @click="oneself">
                  欢迎登陆:{{this.user.username}}
                  <img :src="this.user.imgurl" style="width: 40px;height: 40px;border-radius: 70%;">
                </el-button>
              </el-menu-item>
            </div>
            <div v-if="loginuser==false">
              <el-menu-item index="6" style="float:right;background-color: transparent;font-weight:bold">
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;" @click="index_to_login">登录</el-button>
                <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent; border-style :none;" @click="index_to_regist">注册</el-button>
              </el-menu-item>
            </div>
          </el-menu>

        </div>
      </el-header>
      <el-container>
        <el-aside width="240px">
          <!--<el-row class="tac">-->
            <el-col :span="12" width="240px">
              <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="0" @click="admin_index">
                  <i class="el-icon-setting"></i>
                  <span slot="title" >
                    管理首页
                  </span>
                </el-menu-item>
               <!-- <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>板块管理</span>
                  </template>
                    <el-menu-item index="1-1">板块信息</el-menu-item>
                    <el-menu-item index="1-2">版主信息</el-menu-item>
                </el-submenu>-->
                <el-menu-item index="1" @click="admin_plate"  v-if="this.user.status==3|| this.user.status==4">
                  <i class="el-icon-menu"></i>
                  <span slot="title" >板块管理</span>
                </el-menu-item>
                <el-menu-item index="2" @click="admin_theme">
                  <i class="el-icon-document"></i>
                  <span slot="title" >主题管理</span>
                </el-menu-item>
                <el-menu-item index="3" @click="users_class">
                  <i class="el-icon-office-building"></i>
                  <span slot="title" >班级管理</span>
                </el-menu-item>
                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-coordinate"></i>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item index="2-1" @click="users_manage">普通用户</el-menu-item>
                  <el-menu-item index="2-2" @click="users_admin">管理员</el-menu-item>
                  <el-menu-item index="2-3" @click="users_teacher">教师用户</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
       <!--   </el-row>-->
        </el-aside>
        <el-main style="padding-top: 10px">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        activeIndex: '1',
        loginuser:false,
        user:[],
        count: 10,
        loading: false,
      }
    },
    computed: {
      noMore () {
        return this.count >= 20
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    created() {
      this.$router.go(1);
      this.user = JSON.parse(localStorage.getItem("user"));
      if(this.user != null){
        this.loginuser = true;
      }
    },
    methods:{
      users_class(){
        this.$router.push('/adminindex/classz')
      },
      /*首页跳转*/
      admin_index(){
        this.$router.push('/adminindex/')
      },
      /*主题帖管理页面*/
      admin_theme(){
        this.$router.push("/adminindex/admintheme");
      },
      /*板块管理页面*/
      admin_plate(){
        this.$router.push("/adminindex/adminplate");
      },
      /*用户管理页面跳转*/
      users_manage(){
        this.$router.push('/adminindex/users')
      },
      users_admin(){
        this.$router.push('/adminindex/admin')
      },
      users_teacher(){
        this.$router.push('/adminindex/teacher')
      },
      load () {
        this.loading = true
        setTimeout(() => {
          this.count += 2
          this.loading = false
        }, 2000)
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      /*退出*/
      tuichu(){
        localStorage.removeItem('user');
        this.loginuser = false ;
        this.admin_user = false ;
        this.$router.push('/')
      },
      /*个人信息页面跳转*/
      oneself(){
        // alert("跳转到用户个人信息页面")
        this.$router.push('/userself')
      },
      /*侧边栏方法*/
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  .el-col-12 {
    width: 100%;
  }
  .el-aside {
    background-color: #ffffff;
 /*   color: #333;*/
    /*text-align: center;*/
    /*line-height: 200px;*/
  }
  .el-main{

  }

  /*.el-container:nth-child(5) .el-aside,*/
  /*.el-container:nth-child(6) .el-aside {*/
  /*  line-height: 260px;*/
  /*}*/

  /*.el-container:nth-child(7) .el-aside {*/
  /*  line-height: 320px;*/
  /*}*/
</style>
